<template>
  <div>
    <el-row>
      <el-col :span="24">
          <div class="lesson-list clearfix">
            <div
              v-for="(item, index) in course"
              :key="index"
              @click="link(item.id,item.nature)"
              class="lesson-card fl"
            >
              <div class="lesson-img">
                <img
                  v-bind:src= item.cover
                  alt=""
                />
              </div>
              <div class="lesson-info">
                <div class="info-title">{{ item.title}}</div>
                <div class="play-type">
                  <div v-for="(m,index) in item.method" :key="index">
                    <span :class=cPlayClass(m.method_id)>{{ m.method_name }}</span>
                  </div>
                </div>
                <div class="introduce">
                  <div class="info-buy">{{ item.buy_num }}人已购买</div>
                  <div class="info-price">￥<span>{{ item.sale_price }}</span></div>
                </div>
              </div>
            </div>
          </div>
      </el-col>
    </el-row>
    <div class="more-wraps"><div class="morelist" v-if="(this.length>8)">更多优质课程</div></div>
  </div>
    

</template>
<script>
export default {
  name:'course',
  data(){
    return{
      length:1
    }
  },
  props:{
    course:Array
  },
  created(){
    this.length=course.length
  },
  methods:{

    // 精品课程
    cPlayClass(i) {
      switch (i) {
        case 1:
          return "live";
        case 2:
          return "video";
        case 3:
          return "other";
      }
    },    
  }
};
</script>
<style  lang='less' scoped>
// 精品课程
.flex(@justify:flex-start,@align:flex-start){
  display: flex;
  justify-content: @justify;
  align-items:@align
}
.lesson-list {
  padding: 15px;
}
.lesson-card {
  cursor: pointer;
  margin-bottom: 15px;
  width: 255px;
  margin-right: 34px;
  border-radius: 4px;
  box-shadow: 0px 0px 13px 1px rgba(57, 57, 57, 0.05);
  .lesson-img {
    img {
      width: 255px;
      height: 155px;
    }
  }
  .lesson-info {
    background: #fff;;
    padding: 15px 15px;
    .info-title {
      margin-bottom: 5px;
      font-size: 16px;
      color: #484848;
    }
    .play-type {
      .flex();
      margin-bottom: 10px;
      color: #ffffff;
      span {
        display: inline-block;
        margin-right: 5px;
        padding: 2px 5px;
        border-radius: 2px;
        font-size: 12px;
      }
      .live {
        background: #15c3bb;
      }
      .video {
        background: #45a0ff;
      }
      .other{
        background: #ee9900;
      }
    }
    .introduce {
      .flex(space-between, center);
      font-size: 12px;
      color: #979797;
      .info-price {
        color: #fd6f21;
        span {
          font-size: 24px;
        }
      }
    }
  }
} 
.more-wraps {
  display: flex;
  align-items: center;
  height: 100px;
  line-height: 100px;
}
.morelist {
  cursor: pointer;
  width: 140px;
  height: 24px;
  line-height: 24px;
  margin: 0 auto;
  text-align: center;
  color: #27a4fe;
  font-size: 12px;
  border: 1px solid #27a4fe;
  border-radius: 24px;
}
</style>